<script type="text/javascript">
function processsignupUserForm1() {		
 	var checkResult = true;
 	var form = document.signupUserForm1;
	
 	if(form)
 	{	
 		form.actionForm.value = 'submit';	 	
		
	 	if(form.username.value.replace(/^\s+/, '') == '')
	 	{		 	
			alert('Please input username.');
	 		form.username.focus();
			return false;
	 	}
		
		if(form.password.value.replace(/^\s+/, '') == '')
	 	{		 	
			alert('Please input password.');
	 		form.password.focus();			
			return false;
	 	}
		
		if(form.confirmPassword.value.replace(/^\s+/, '') == '')
	 	{		 	
			alert('Please confirm password.');
	 		form.confirmPassword.focus();			
			return false;
	 	}
		
		if(form.termAccept.checked == false)
	 	{		 	
			alert('Please Accept the term before process signup.');
	 		form.termAccept.focus();			
			return false;
	 	}
	 	
	 	$.ajax({
			type		: "POST",
			cache	: false,
			dataType: 'json',
			url		: "<{$APPLICATION_URL}>/Browse/Signup/asignup",
			data		: $("#signupUserForm1").serializeArray(),
			success: function(obj) {
				if (typeof obj["error"] != "undefined" && (obj["error"] == "1" || obj["error"] == 1)) {				
					$.fancybox.close();
					window.location.replace("<{$APPLICATION_URL}>/Browse/Payment");						
				}
				else 
				{
					$("#login_error_signup1").text(obj["message"]);
					$("#login_error_signup1").show();
					$.fancybox.resize();
				}
			}
		});
		return true;
 	}	
 	return false;
	}
$("#login_error_signup1").hide();
</script> 
<div style='display: none'>
<div id="signup_option_1">
<div id="page-title">
	<h1 class="page-heading">User Signup Page</h1>
</div>
<div id="main-content" style="padding: 0px;">
	<article id="main-article" style="padding: 10px;">	
	<div class="two-column alpha" style="padding: 0px;">
	<form action="<{$APPLICATION_URL}>/Browse/MyAccount/signup" method="post"
		id="signupUserForm1" name="signupUserForm1">
		<ol class="forms">
			<li>
				<span class="error" id="login_error_signup1"></span>
			</li>
			<li><label for="username" style="width:100px;">Username</label><input type="text"
				id="username" name="username" value="<{$username}>"></li>
			<li><label for="password" style="width:100px;">Password</label><input type="password"
				id="password" name="password" value="<{$password}>"></li>
			<li><label for="confirmPassword" style="width:100px;">Confirm Pass</label><input type="password"
				id="confirmPassword" name="confirmPassword" value="<{$confirmPassword}>"></li>
			<li><label for="price" style="padding-right:5px;width:100px;">Package</label>
			<input type="text" id="price" name="price" value="<{$packagePrice}>" style="width:80px;" readonly="readonly"> (&pound)							
			</li>
				<li><label for="firstName" style="width:100px;">First Name</label> <input type="text"
				id="firstName" name="firstName" value="<{$firstName}>" style="width:35%;"></li>
			<li><label for="lastName" style="width:100px;">Last Name</label><input type="text"
				id="lastName" name="lastName" value="<{$lastName}>" style="width:35%;"></li>
			<li><label for="email" style="width:100px;">Email</label><input type="text" id="email"
				name="email" value="<{$email}>" style="width:120px;"></li>
			<li><p><small>CHECK THE BOX TO REMOVE THE POWERED BY SLAPPIT.COM IN FOOTER <br/>(COST &pound5 PER MONTH)</small></p><input type="checkbox" id="brandFree"
				name="brandFree" value="1" style="width:5%; margin-left:20px;">Brand Free</li>
			<li><div style="width:100%; height: 180px; overflow-y:scroll; float:left">
	            	<{include file="Browse/TermAndCondition/term_condition.tpl"}>
	            </div></li>			
			<li><input type="checkbox" id="termAccept"
				name="termAccept" value="<{$termAccept}>" style="width:5%; margin-left:20px;">I Accept the term of uses</li>
			<li><a id="login-form" class="silver-button" onclick="return processsignupUserForm1()">Sign Up</a></li>
			<input type="hidden" id="actionForm" name="actionForm" value=""/>
			<input type="hidden" id="packageOptionId" name="packageOptionId" value="<{$id}>"/>			
		</ol>		
	</form>
	</div>
	<div id="service-page">
		<div class="clear"></div>
	</div>	
	</article>
</div>
</div>
</div>

